<!--
 * @Author: zi.yang
 * @Date: 2021-03-11 21:03:56
 * @LastEditors: zi.yang
 * @Description: 搜索热门 组件
 * @FilePath: \vue-music\src\components\search\music-hot.vue
-->
<template>
  <div class="search-hot">
    <div class="search-hot-head">热搜榜</div>
    <div
      class="search-hot-item"
      v-for="(item, index) in hotList"
      :key="index"
      @click="handleToList(item.first)"
    >
      <div class="search-hot-content">
        <div class="search-hot-top">{{ index + 1 }}.</div>
        <div class="search-hot-word">
          <div>
            {{ item.first }}
            <img v-show="item.iconUrl" :src="item.iconUrl" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/* global Readonly:false */
import axios from 'axios';
import { reactive, toRefs, onMounted } from '@vue/composition-api';

export default {
  name: 'music-hot',
  // vue3 中，没有this 指向，或者说不再指向 vue 实例
  setup(props: Readonly<{}>, context: Readonly<{ emit: (event: string, ...args: any[]) => void }>) {
    type tState = {
      hotList: Object;
      handleToList: (keyword: string) => void;
    };
    const { emit } = context;
    const state: tState = reactive({
      hotList: {},
      handleToList(keyword: string) {
        emit('setKeyword', keyword);
      },
    });
    onMounted(() => {
      axios
        .get('/search/hot/detail')
        .then((res) => {
          console.log(res);
          state.hotList = res.data.result.hots;
          emit('hotRequest', false);
        })
        .catch((e) => {
          console.log(e);
          alert('数据请求失败！');
        });
    });
    return toRefs(state);
  },
};
</script>

<style scoped>
.search-hot {
  display: flex;
  flex-direction: column;

  margin: 10px 5px;
}

.search-hot > .search-hot-head {
  font-size: 17px;
}

.search-hot > .search-hot-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 5px 0;

  cursor: pointer;

  font-size: 17px;
}

.search-hot > .search-hot-item > .search-hot-content {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.search-hot > .search-hot-item > .search-hot-content > .search-hot-top {
  width: 20px;
  margin-right: 10px;

  color: red;

  font-size: 18px;
  font-style: italic;
}
.search-hot > .search-hot-item > .search-hot-content > .search-hot-word {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.search-hot > .search-hot-item > .search-hot-content > .search-hot-word > div:nth-of-type(1) {
  display: flex;

  font-size: 16px;
}

img {
  height: 15px;
  margin-left: 5px;

  border: 0;
}
</style>
